<template>
    <span>
        <button :disabled="count <= props.min" @click="countChange(-1)">-</button>
        <input type="text" v-model.number="count" class="box" />
        <button @click="countChange(1)" :disabled="count >= props.max">+</button>
    </span>
</template>
<script lang="ts" setup>
// define定义 Props属性  ref引用
// defineEmits 定义发送事件
// withDefaults 设置默认值
import { defineProps, ref, withDefaults, defineEmits, watch } from 'vue';
// 定义porps的接口
interface Iprops {
    max?: number,
    min?: number,
    step?: number,
    value: number,
}
// 定义props（父组件传递过来的参数）
// ts写法并设置默认值
const props = withDefaults(defineProps<Iprops>(), {
    max: 20,
    min: 1,
    step: 1,
    value: 1
});


const count = ref<number>(props.value);
// 定义改变count的方法
function countChange(n: number): void {
    count.value += props.step * n;
}
// const emit = defineEmits(["change"]);//简易写写法
const emit = defineEmits<{ (event: "change", data: number): void }>()
watch(count, () => {
    emit("change", count.value)
})

</script>
 